{% load blog_tags static %}
{% load dashboard %}

<!--个人空间-->
<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3 d-none d-lg-block" id="home-card">
    <div class="card-header bg-none px-0">
        <strong><i class="fa fa-flag mr-2 f-17"></i>博客空间</strong>
    </div>
    <div class="card-body px-0 pt-3 pb-1">
        <div class="row text-center">
            <div class="col">
                <a href="https://github.com/Hopetree/izone" target="_blank" title="查看博客源码">
                    <img style="max-width:40px" alt="博客源代码" src="{% static 'blog/img/github.png' %}">
                    <p class="mt-2">博客源码</p>
                </a>
            </div>
            <div class="col">
                <a href="{% url 'blog:timeline' %}" target="_blank" title="查看网站建站历程">
                    <img style="max-width:40px" alt="网站的建站历程" src="{% static 'blog/img/blog.png' %}">
                    <p class="mt-2">更新记录</p>
                </a>
            </div>
            <div class="col">
                <a href="{% url 'rss' %}" target="_blank" title="订阅博客">
                    <img style="max-width:40px" alt="订阅博客RSS" src="{% static 'blog/img/rss.png' %}">
                    <p class="mt-2">RSS订阅</p>
                </a>
            </div>
        </div>
        {% get_blog_infos as blog_infos %}
        <div class="row text-center blog-info-list">
            <div class="col">
                <div>
                    <p class="mt-1 badge">{{ blog_infos.article }}</p>
                    <p class="mt-1">文章</p>
                </div>
            </div>
            <div class="col">
                <div>
                    <p class="mt-1 badge">{{ blog_infos.subject }}</p>
                    <p class="mt-1">专题</p>
                </div>
            </div>
            <div class="col">
                <div>
                    <p class="mt-1 badge">{{ blog_infos.tag }}</p>
                    <p class="mt-1">标签</p>
                </div>
            </div>
            <div class="col">
                <div>
                    <p class="mt-1 badge">{{ blog_infos.comment }}</p>
                    <p class="mt-1">评论</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--阅读榜单，至少5篇文章才显示，最多显示10篇文章-->
{% get_hot_article_list as hot_article_list %}
{% if hot_article_list|length >= 5 %}
    <div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="article-view-card">
        <div class="card-header bg-none px-0">
            <strong><i class="fa fa-fire mr-2 f-17"></i>昨日热榜</strong>
        </div>
        <ul class="article-view-list list-group list-group-flush f-14">
            {% for hot_article in hot_article_list|slice:":10" %}
                <li class="py-2">
                    <a href="{{ hot_article.get_absolute_url }}"
                       data-last-views="{{ hot_article.add_view }}">{{ hot_article.title }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}
<!--文章分类-->
<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="category-card">
    <div class="card-header bg-none px-0">
        <strong><i class="fa fa-book mr-2 f-17"></i>文章分类</strong>
    </div>
    {% get_category_list as categories %}
    <ul class="list-group list-group-flush f-16">
        {% for each in categories %}
            <li class="list-group-item d-flex justify-content-between align-items-center pr-2 py-2">
                <a class="category-item" href="{{ each.get_absolute_url }}"
                   title="查看【{{ each.name }}】分类下所有文章">{{ each.name }}</a>
                <span class="badge text-center" title="当前分类下有{{ each.total_num }}篇文章">{{ each.total_num }}</span>
            </li>
        {% endfor %}
    </ul>
</div>
<!--标签云-->
<div class="card border-0 rounded-6 px-3 mb-2 mb-md-3" id="tag-card">
    <div class="card-header bg-none px-0">
        <strong><i class="fa fa-tags mr-2 f-17"></i>标&nbsp;签&nbsp;云</strong>
    </div>
    <div class="card-body px-0 py-3">
        <div class="tag-cloud">
            {% get_tag_list as tag_list %}
            {% for tag in tag_list %}
                <a href="{{ tag.get_absolute_url }}" class="tags f-16" id="tag-{{ forloop.counter }}"
                   title="【{{ tag.name }}】标签下有{{ tag.total_num }}篇文章">{{ tag.name }}</a>
            {% endfor %}
        </div>
    </div>
</div>